<template>
    <div class="resourceDialogBG">
        <el-dialog v-model="dialogFlag" center :align-center="true" width="50%" class="resourceDialog">
            <div class="resourceDialogTittle">
                <p>资源库</p>
            </div>
            <el-scrollbar height="600px" class="resourceScollbar">
                <!-- 一级菜单 -->
                <el-collapse v-model="active1Names" @change="firstChange" class="collapseFirst" accordion>
                    <!-- 一级菜单内容 -->
                    <el-collapse-item :title="item.name" :name="item.id" v-for="item in firstList" :key="item.id">
                        <div class="collapseContent">
                            <!-- 二级菜单 -->
                            <el-collapse v-model="active2Names" @change="secondChange" class="collapseFirst" accordion>
                                <!-- 二级菜单内容 -->
                                <el-collapse-item :title="item.name" :name="item.id" v-for="item in firstListData"
                                    :key="item.id">
                                    <div class="collapseContent">
                                        <a :href="item.link" target="_blank" class="collapseLink" v-for="item in secondData"
                                            :key="item.indexOf">{{ item.title }}</a>
                                    </div>
                                </el-collapse-item>
                            </el-collapse>
                            <!-- 内容 -->
                            <a :href="item.link"  target="_blank" class="collapseLink" v-for="item in firstListData2"
                                :key="item.indexOf">{{ item.title }}</a>
                        </div>

                    </el-collapse-item>
                </el-collapse>
            </el-scrollbar>
        </el-dialog>
    </div>
</template>
<script setup lang='js' name=''>
import { ref } from 'vue';
// dialog开关
const dialogFlag = defineModel()
// 当前折叠面板位置
const active1Names = ref()
const active2Names = ref()

// 请求函数
import Ciallo from '@/API/Ciallo';
async function getResourceParentAPI() { return Ciallo({ url: "parent_directory", method: "get" }) }
async function getResourceSecondAPI(pid) { return Ciallo({ url: "second_directory", method: "post", params: { pid } }) }
async function getResourceParentDataAPI(pid) { return Ciallo({ url: "directory_data", method: "post", params: { pid } }) }
async function getResourceSecondDataAPI(sid) { return Ciallo({ url: "second_directory_data", method: "post", params: { sid } }) }


// 一级菜单标题
const firstList = ref("")
async function getResourceParent() {
    const res = await getResourceParentAPI()
    firstList.value = res.data
}
getResourceParent()

// 一级菜单内容
const firstListData = ref("")
const firstListData2 = ref("")
async function getResourceParentData(id) {
    const res = await getResourceSecondAPI(id)
    firstListData.value = res.data
}
async function getResourceParentData2(id) {
    const res = await getResourceParentDataAPI(id)
    firstListData2.value = res.data
}
// 一级折叠面板更新请求
const firstChange = (val) => {
    if (val != '') {
        getResourceParentData(val)
        getResourceParentData2(val)
    }
}

// 二级菜单内容
const secondData = ref("")
async function getResourceSecondData(id) {
    const res = await getResourceSecondDataAPI(id)
    secondData.value = res.data
}
// 二级折叠面板更新请求
const secondChange = (val) => {
    if (val != '') {
        getResourceSecondData(val)
    }
}
</script>
<style>
.light {
    --dialogBG: white;
    --dialogBG2: black;
    --dialogBG3: rgba(201, 201, 201, 0.199);
    --dialogBG4: rgba(215, 215, 215, 0.041);
    --dialogBG5: rgba(0, 0, 0, 0.235);
}

.dark {
    --dialogBG: rgb(34, 34, 34);
    --dialogBG2: white;
    --dialogBG3: rgba(255, 255, 255, 0.055);
    --dialogBG4: rgba(65, 65, 65, 0.605);
    --dialogBG5: black;

}
</style>
<style scoped>
/* 对话框 */
:deep(.resourceDialog) {
    height: auto;
    background: var(--dialogBG) !important;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 0px var(--dialogBG2);
}

/* 标题 */
.resourceDialogTittle {
    font-size: 25px;
    text-align: center;
    color: var(--dialogBG2);
    padding-bottom: 24px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--dialogBG2);
}

/* 折叠菜单 */
.collapseFirst {
    border: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* 条目边框 */
.collapseFirst>* {
    border-radius: 10px !important;
    overflow: hidden;
}

/* 选项 */
.collapseFirst>*>*:nth-child(1) {
    border: none;
    padding: 0 10px;
    font-size: 15px;
    color: var(--dialogBG2);
    background: var(--dialogBG3);
}

/* 内容 */
.collapseFirst>*>*:nth-child(2) {
    border: none;
    padding-top: 10px;
    border-top: 1px solid var(--dialogBG5);
    padding-left: 20px;
    background: var(--dialogBG4);
    padding-bottom: 0px;
}

/* 一级菜单:二级菜单与内容 */
.collapseContent {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 链接内容 */
.collapseLink {
    display: block;
    transition: all 0.5s;
    font-size: 15px;
    padding: 10px;
    text-decoration: none;
    color: var(--dialogBG2);
    margin-left: 20px;
    background: rgba(0, 200, 255, 0.231);
    border-radius: 10px !important;
    overflow: hidden;
}
</style>